// import {
// 	saveOrUpdate
// } from '@/api/index.js';
import IconA from '@/components/icon/nav_iconA';
import IconB from '@/components/icon/nav_iconB';
import IconC from '@/components/icon/nav_iconC';
import IconD from '@/components/icon/nav_iconD';
import IconE from '@/components/icon/nav_iconE';
import IconF from '../../../components/icon/nav_iconF.vue';
import {
	mapGetters
} from 'vuex';
import styles from '@/app.scss';
import { saveOrUpdate } from '@/api/basedata/pageConfig.js';
import { getPerMission } from '@/utils/auth.js';
import {
	source_page
} from "@/api/board/datashow.js";
export default {
	components: {
		IconA,
		IconB,
		IconC,
		IconD,
		IconE,
		IconF
	},
	data() {
		return {
			roleId: '',
			bg_color: styles.bg_color,
			drawer: false,
			screenWidth: 0,
			show: true,
			showPop: false,
			colnum: null,
			linenum: [],
			Module: false,
			indexA: null,
			indexB: null,
			indexC: null,
			select: null,
			url: '',
			name: '',
			list: [
			],
			total: [],
			isDown: false,
			childrenList: []
		};
	},
	computed: {
		...mapGetters({
			theme: 'gettheme'
		}),
		leftStyle() {
			return 'width:' + (this.screenWidth - 72) * this.total[0].pages.leftwidth + 'px';
		},
		rightStyle() {
			return 'width:' + (this.screenWidth - 72) * this.total[0].pages.rightwidth + 'px';
		},
	},
	mounted() {
		var that = this;
		var left = document.getElementById('left');
		left.onmousemove = function (e) {
			if ((left.offsetLeft + left.offsetWidth - e.clientX) < 5) {
				//console.log(that.$refs.indexEditor.scrollTop)
				left.style.cursor = 'w-resize';
				that.isDown = true;
				that.leftDrag()
			} else {
				left.style.cursor = 'default';
				that.isDown = false;
			}
		}
	},
	created() {
		this.roleId = this.$route.query.roleId
		this.screenWidth = this.onScreenWidth(document.documentElement.clientWidth);
		window.onresize = () => {
			return (() => {
				this.screenWidth = this.onScreenWidth(document.documentElement.clientWidth);
			})();
		};
		this.total = JSON.parse(sessionStorage.getItem('flex'));
		if (this.total == '') {
			this.total = [{
				pages: {
					leftwidth: 0.7,
					rightwidth: 0.3,
					list: [
					]
				}
			}]
		}
		for (let a = 0; a < this.total[0].pages.list.length; a++) {
			this.Onmouse('item' + a);
		}
		this.dragAnddrop()
		if (this.total[0].pages.list.length > 2) {
			this.show = false;
		}
		let color = localStorage.getItem('color');
		if (color) {
			this.chooseBg(color);
		}
		/**获取所有看板组件*/
		this.getEcharts()
	},
	methods: {
		getEcharts() {
			let _this = this
			let functionList = getPerMission()?.functionLimitList.filter(res => (res.code.indexOf('board_Salesofkanban') !== -1))
			functionList.forEach(async res => {
				res.title = res.name
				let data = {
					page: 1,
					pageSize: 9999,
					functionId: res.functionId
				}
				await source_page(data).then(a => {
					_this.childrenList.push(...a.data.data)
					res.children = a.data.data
				})
			})
			_this.list = functionList
		},
		leftDrag() {
			var that = this;
			var left = document.getElementById('left');
			var right = document.getElementById('right');
			left.onmousedown = function (ev) {
				//鼠标按下事件
				if (that.isDown == false) {
					return;
				}
				left.style.cursor = 'w-resize';
				var iEvent = ev || event;
				var dx = iEvent.clientX;
				var dw = left.offsetWidth;
				that.isDown = true;
				document.onmousemove = function (ev) {
					var iEvent = ev || event;
					left.style.width = dw + (iEvent.clientX - dx) + 'px';
					if (left.offsetWidth <= 300) {
						left.style.width = '300px';
					}
					if (left.offsetWidth >= that.screenWidth - 372) {
						left.style.width = that.screenWidth - 372 + 'px';
					}
					right.style.width = that.screenWidth - left.offsetWidth - 72 + 'px';
					that.total[0].pages.leftwidth = Number((left.offsetWidth / (that.screenWidth - 72)).toFixed(2))
					that.total[0].pages.rightwidth = (1 - (left.offsetWidth / (that.screenWidth - 72))).toFixed(2)
				};
				document.onmouseup = function () {
					left.style.cursor = 'default';
					that.isDown = false;
					document.onmousedown = null;
					document.onmousemove = null;
				};
				return false;
			};
		},
		chooseBg(command) {
			window.document.getElementsByTagName('body')[0].style.setProperty('--bg_colorTable', command.split(',')[1]);
			window.document.getElementsByTagName('body')[0].style.setProperty('--bg_color', command.split(',')[0]);
			localStorage.setItem('color', command);
		},
		/*新页面方法*/
		col(height) {
			return 'height:' + height
		},
		line(width) {
			return 'width:' + width
		},
		colId(index, pagesIndex) {
			return 'pagesTtem' + '_' + index + '_' + pagesIndex
		},
		lineId(index, pagesIndex, arrIndex) {
			return 'pagesTtem' + '_' + index + '_' + pagesIndex + '_' + arrIndex
		},
		changgeLine() {
			this.linenum = []
			for (let b = 0; b < this.colnum; b++) {
				this.linenum.push({
					line: 3
				})
			}
		},
		addPages() {
			if (this.colnum == null || this.colnum < 1 || this.colnum > 9) {
				this.$message({
					showClose: true,
					message: '为了更好的页面效果，请行数请控制在1~9之间',
					type: 'warning'
				})
				return
			}
			/*flex布局信息类型
			*flex=[
				{line:1},
				{line:2},
				{line:1}
				]
			*/
			let flex = this.linenum
			//return
			let data = new Object();
			data.pages = []
			for (let a = 0; a < flex.length; a++) {
				let height = (973 / flex.length).toFixed(2)
				data.pages.push({
					height: height + 'px',
					arr: []
				})
				for (let b = 0; b < flex[a].line; b++) {
					let width = (100 / flex[a].line).toFixed(2)
					data.pages[a].arr.push({
						width: width + '%',
						name: '模块名称',
						data: '',
						url: '',
					})
				}
			}
			this.total.push(data)
			this.dragAnddrop()
			this.showPop = false
			this.colnum = null
			this.linenum = []
		},
		dragAnddrop() {
			this.$nextTick(() => {
				this.total.forEach((item, index) => {
					if (index !== 0) {
						this.total[index].pages.forEach((a, b) => {
							this.total[index].pages[b].arr.forEach((c, d) => {
								this.Onmoseline(this.colId(index, b), this.lineId(index, b, d))
							})
						})
					}
				})
			})
		},
		Onmoseline(aid, bid) {
			let _this = this
			_this.$nextTick(() => {
				var item = document.getElementById(bid);
				item.onmousemove = function (e) {
					let num = new Number()
					for (let a = 0; a < aid.split('_')[2]; a++) {
						num = Number(num) + Number(_this.total[aid.split('_')[1]].pages[a].height.replace(/[\px]/g, ''))
					}
					if (item.offsetLeft + item.offsetWidth - e.clientX + 12 < 5 || (item.offsetHeight + 12 + num + 1021 * aid.split('_')[1] + 60 - _this.$refs.indexEditor.scrollTop - e.clientY) < 5) {
						item.style.cursor = 'se-resize';
						_this.isDown = true;
						_this.lineWidth(aid, bid)
					} else {
						item.style.cursor = 'default';
						_this.isDown = false;
					}
				}

			})
		},
		lineWidth(aid, bid) {
			let _this = this
			_this.$nextTick(() => {
				var item = document.getElementById(bid);
				var aitem = document.getElementById(aid);
				item.onmousedown = function (ev) {
					if (_this.isDown == false) {
						return;
					}
					var iEvent = ev || event;
					var dx = iEvent.clientX; //当你第一次单击的时候，存储x轴的坐标。
					var dw = item.offsetWidth; //存储默认的div的宽度。
					var dy = iEvent.clientY;
					var dh = aitem.offsetHeight;
					document.onmousemove = function (ev) {
						var iEvent = ev || event;
						item.style.width = dw + (iEvent.clientX - dx) + 'px';
						aitem.style.height = iEvent.clientY - dy + dh + 'px';
						_this.total[bid.charAt(10)].pages[bid.charAt(12)].height = aitem.style.height
						_this.total[bid.charAt(10)].pages[bid.charAt(12)].arr[bid.charAt(14)].width = (item.offsetWidth / (_this.screenWidth -
							48)).toFixed(2) * 100 + '%'
					};
					document.onmouseup = function () {
						item.style.cursor = 'default';
						_this.isDown = false;
						document.onmousedown = null;
						document.onmousemove = null;
					};
					return false;
				};
			})
		},
		removePages(index) {
			this.total.splice(index, 1)
		},
		/*首页方法*/
		chooseModule(a, b, c) {
			this.Module = true
			this.indexA = a
			this.indexB = b
			this.indexC = c
		},
		saveModule() {
			if (this.select == 1) {
				if (this.indexA == 0) {
					this.total[this.indexA].pages.list[this.indexB].name = 'iframe'
					this.total[this.indexA].pages.list[this.indexB].url = this.url
				} else {
					this.total[this.indexA].pages[this.indexB].arr[this.indexC].name = 'iframe'
					this.total[this.indexA].pages[this.indexB].arr[this.indexC].url = this.url
				}
			} else {
				if (!this.name.length) {
					return
				}
				let index = this.childrenList.find(res => (res.id == this.name[1]))
				if (this.indexA == 0) {
					this.total[this.indexA].pages.list[this.indexB].name = index.title
					this.total[this.indexA].pages.list[this.indexB].data = JSON.stringify(index)
				} else {
					this.total[this.indexA].pages[this.indexB].arr[this.indexC].name = index.title
					this.total[this.indexA].pages[this.indexB].arr[this.indexC].data = JSON.stringify(index)
				}
			}
			this.Module = false
			this.select = null
			this.name = ''
			this.url = ''

		},
		addModule() {
			if (this.total[0].pages.list.length < 3) {
				this.total[0].pages.list.push({
					height: '200px',
					name: '模块名称',
					data: '',
					utl: '',
				});
				this.Onmouse('item' + (this.total[0].pages.list.length - 1))
				//this.chooseHeight('item' + (this.total[0].pages.list.length - 1));
				if (this.total[0].pages.list.length == 3) {
					this.show = false;
				}
			}
		},
		remove(index) {
			this.total[0].pages.list.splice(index, 1);
			if (this.total[0].pages.list.length < 3) {
				this.show = true;
			}
		},
		Onmouse(id) {
			var that = this;
			that.$nextTick(() => {
				var item = document.getElementById(id);
				item.onmousemove = function (e) {
					if ((item.offsetTop + item.offsetHeight - e.clientY - that.$refs.indexEditor.scrollTop) < 5) {
						item.style.cursor = 's-resize';
						that.chooseHeight(id)
						that.isDown = true;
					} else {
						item.style.cursor = 'default';
						that.isDown = false;
					}
				}
			})

		},
		chooseHeight(id) {
			let that = this
			that.$nextTick(() => {
				var item = document.getElementById(id);
				item.onmousedown = function (ev) {
					if (that.isDown == false) {
						return;
					}
					item.style.cursor = 's-resize';
					var iEvent = ev || event;
					var dy = iEvent.clientY; //当你第一次单击的时候，储存Y轴的坐标。
					var dh = item.offsetHeight; //存储默认的div的高度。
					document.onmousemove = function (ev) {
						var iEvent = ev || event;
						item.style.height = iEvent.clientY - dy + dh + 'px';
						if (item.offsetHeight >= 940) {
							that.show = false;
						}
						if (item.offsetHeight >= 973) {
							item.style.height = '973px';
						}
						that.total[0].pages.list[id.charAt(4)].height = item.style.height
					};
					document.onmouseup = function () {
						item.style.cursor = 'default';
						that.isDown = false;
						document.onmousedown = null;
						document.onmousemove = null;
					};
					return false;
				};
			});
		},
		onScreenWidth(Width) {
			if (Width < 1440) {
				return 1440;
			} else {
				return Width;
			}
		},
		clearflex() {
			localStorage.removeItem('flex')
			this.show = true
			this.total = [
				/*页数*/
				{
					pages: {
						leftwidth: 0.7,
						rightwidth: 0.3,
						list: []
					}
				}
			]
		},
		saveFlex() {
			/*请求接口*/
			saveOrUpdate({ pageInfo: JSON.stringify(this.total), roleId: this.roleId }).then(() => {
				this.$router.go(-1)
			})
		},
		seeIndex() {
			let _this = this
			sessionStorage.setItem('flex', JSON.stringify(_this.total))
			_this.$router.push({
				name: 'indexSee',
				query: { roleId: this.roleId }
			});
		},
	}
};
